<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">

<link rel="shortcut icon" href="../../dist/img/favicon.ico">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<style>
body {
	padding-bottom: 200px;
}
</style>
	<div class="container">
		<h4>Select</h4>

		<h6>Big string</h6>
		<form action="#" type="get">
			<select data-toggle="select"
				class="form-control select select-default mrs mbm">
				<option value="0">My Profile</option>
				<option value="1">My Friends</option>
				<option value="2">My Profile</option>
				<option value="3">My Friends</option>
			</select> <input type="submit" value="Submit" class="btn">

		</form>

		<h6>Optroups</h6>

		<select data-toggle="select"
			class="form-control select select-default mrs mbm">
			<optgroup label="Profile">
				<option value="0">My Profile</option>
				<option value="1">My Friends</option>
			</optgroup>
			<optgroup label="System">
				<option value="2">Messages</option>
				<option value="3">My Settings</option>
				<option value="4">Logout</option>
			</optgroup>
		</select>

		<h6>Disabled Select</h6>

		<select data-toggle="select"
			class="form-control select select-default mrs mbm" disabled>
			<option value="0" disabled>My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3" disabled>My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Disabled Options</h6>

		<select data-toggle="select"
			class="form-control select select-default mrs mbm">
			<option value="0" disabled>My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3" disabled>My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Inversed Dropdown</h6>

		<select data-toggle="select" name="inverse-dropdown"
			class="form-control select select-default mrs mbm">
			<option value="0">My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3">My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Inversed Dropdown + Optgroups</h6>

		<select data-toggle="select" name="inverse-dropdown-optgroup"
			class="form-control select select-default mrs mbm">
			<optgroup label="Profile">
				<option value="0">My Profile</option>
				<option value="1">My Friends</option>
			</optgroup>
			<optgroup label="System">
				<option value="2">Messages</option>
				<option value="3">My Settings</option>
				<option value="4">Logout</option>
			</optgroup>
		</select>

		<h6>Inversed Dropdown + Disabled Options</h6>

		<select data-toggle="select" name="inverse-dropdown-disabled"
			class="form-control select select-default mrs mbm">
			<option value="0" disabled>My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3" disabled>My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Visible search field</h6>

		<select data-toggle="select" name="searchfield"
			class="form-control select select-default mrs mbm">
			<option value="0">My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3">My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Inversed Dropdown + Visible search field</h6>

		<select data-toggle="select" name="inverse-dropdown-searchfield"
			class="form-control select select-default mrs mbm">
			<option value="0">My Profile</option>
			<option value="1">My Friends</option>
			<option value="2">Messages</option>
			<option value="3">My Settings</option>
			<option value="4">Logout</option>
		</select>

		<h6>Color variants</h6>

		<select data-toggle="select"
			class="form-control select select-default mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-inverse mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-primary mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-info mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-danger mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-success mrs mbm">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-warning mrs">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Friends</option>
		</select>

		<h6>Custom sizes</h6>

		<select data-toggle="select"
			class="form-control select select-default select-hg mrs">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Dear Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-default select-lg mrs">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Dear Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-default mrs">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Dear Friends</option>
		</select> <select data-toggle="select"
			class="form-control select select-default select-sm mrs">
			<option value="0">My Profile here is</option>
			<option value="1">My Friends</option>
			<option value="2">My Profile</option>
			<option value="3">My Dear Friends</option>
		</select>

		<h6>Select with .form-group</h6>

		<div class="form-group">
			<select data-toggle="select"
				class="form-control select select-primary select-lg">
				<option value="0">My Profile here is</option>
				<option value="1">My Friends</option>
				<option value="2">My Profile</option>
				<option value="3">My Friends</option>
			</select>
		</div>

		<div class="form-group">
			<select data-toggle="select"
				class="form-control select select-inverse">
				<option value="0">My Profile here is</option>
				<option value="1">My Friends</option>
				<option value="2">My Profile</option>
				<option value="3">My Dear Friends</option>
			</select>
		</div>

		<br>
		<br>

		<h4>Multi select</h4>

		<h6>Big string</h6>

		<select data-toggle="select" multiple
			class="form-control multiselect multiselect-default">
			<option value="0" selected>Одиннадцатиклассница
				рентгеноэлектрокардиографическая</option>
			<option value="2">3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select>

		<h6>Color variants</h6>

		<select data-toggle="select" multiple
			class="form-control multiselect multiselect-default mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-inverse mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-primary mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-info mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-danger mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-success mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select> <select data-toggle="select" multiple
			class="form-control multiselect multiselect-warning mrs mbm">
			<option value="0" selected>1 option</option>
			<option value="1">2 option</option>
			<option value="2" selected>3 option</option>
			<option value="3">4 option</option>
			<option value="4">5 option</option>
		</select>

	</div>
	<!-- /.container -->

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="../../dist/js/vendor/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="../../dist/js/flat-ui.min.js"></script>

	<script src="../assets/js/application.js"></script>

	<script>
      $(document).ready(function(){
        $('select[name="inverse-dropdown"], select[name="inverse-dropdown-optgroup"], select[name="inverse-dropdown-disabled"]').select2({dropdownCssClass: 'select-inverse-dropdown'});

        $('select[name="searchfield"]').select2({dropdownCssClass: 'show-select-search'});
        $('select[name="inverse-dropdown-searchfield"]').select2({dropdownCssClass: 'select-inverse-dropdown show-select-search'});
      });
    </script>

</body>
</html>
